@extends('admin::layouts.master')
@section('head')
    <link rel="stylesheet" href="{{asset('addons/Wachat/Resources/views/assets/css/menu.css')}}">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
@endsection
@section('content')
    {{--防止调用变量和laravel冲突，在vue的调用前面加@--}}
    <div class="card" id="menu">
        <div class="card-header">自定义菜单管理</div>
        <ul role="tablist" class="nav nav-tabs">
            <li class="nav-item"><a href="/wachat/wxmenu" class="nav-link">自定义菜单列表</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">编辑自定义菜单</a></li>
        </ul>
        <form action="/wachat/wxmenu/{{$wxmenu['id']}}" method="post">
            <div class="card-body card-body-contrast">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="col-sm-5">
                        <div class="mobile">
                            <div class="menu-container">
                                <div class="menu" v-for="(v,k) in menus">
                                    <h5>
                                        <i class="fa fa-minus-square" aria-hidden="true" @click="del(k)"></i>
                                        <span @click="setActive(v)">@{{ v.name }}</span>
                                    </h5>
                                    <dl>
                                        <dd v-if="v.sub_button.length < 5 ">
                                            <i class="fa fa-plus-square" aria-hidden="true"></i>
                                            <span @click="addSubMenu(v)">添加子菜单</span>
                                        </dd>
                                        <dd v-for="(m,n) in v.sub_button">
                                            <i class="fa fa-minus-square" aria-hidden="true" @click="delSubButton(v,n)"></i>
                                            <span @click="setActive(m)">@{{ m.name }}</span>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="menu" @click="add()" v-if="menus.length < 3">
                                    <h5>
                                        <i class="fa fa-plus-square" aria-hidden="true"></i>
                                        添加菜单
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="card">
                            <div class="card">
                                <div class="card-header">
                                    菜单设置
                                </div>
                                <div class="card-block">
                                    <div class="form-group row">
                                        <label class="col-12 col-sm-3 col-form-label text-sm-right">名称</label>
                                        <div class="col-12 col-sm-8 col-lg-6">
                                            <input type="text" name="name"  value="{{$wxmenu['name']}}" class="form-control form-control-sm">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-block">
                                <div class="form-group row">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">菜单名称</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input type="text" v-model="active.name" placeholder="请输入菜单名称..." class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="form-group row pt-1 pb-1">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">动作</label>
                                    <div class="col-12 col-sm-8 col-lg-6 form-check mt-2">
                                        <label class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" v-model="active.type" value="view"
                                                   class="custom-control-input"><span
                                                    class="custom-control-label">链接</span>
                                        </label>
                                        <label class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" class="custom-control-input" v-model="active.type" value="click"><span
                                                    class="custom-control-label">关键词</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group row" v-if="active.type == 'view'">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">链接</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input type="text" v-model="active.url" placeholder="请输入链接地址..." class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="form-group row" v-if="active.type == 'click'">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">关键词</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input type="text"  v-model="active.key" placeholder="请输入回复关键词..." class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>
                            <textarea name="data" hidden>@{{ menus }}</textarea>
                            <div class="card-footer text-muted">
                                <button class="btn btn-primary offset-sm-2">保存菜单</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        require(['{{asset('addons/Wachat/Resources/views/assets/js/menu.js')}}'],function (index) {
            index({!! $wxmenu['data'] !!});
        })
    </script>
@endsection

